<template>
  <div class="match-predict-page">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>欧洲赔率预测查询</span>
          <el-button 
            type="text" 
            @click="toggleSearch"
            :icon="isSearchCollapsed ? 'ArrowDown' : 'ArrowUp'"
          >
            {{ isSearchCollapsed ? '展开' : '收起' }}
          </el-button>
        </div>
      </template>
      
      <el-collapse-transition>
        <div v-show="!isSearchCollapsed">
          <el-form 
            :model="searchForm" 
            :inline="true" 
            class="search-form"
            label-width="120px"
          >
            <!-- 基本信息 -->
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="赛事名称">
                  <el-input 
                    v-model="searchForm.event_name" 
                    placeholder="请输入赛事名称"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="赛事编号">
                  <el-input 
                    v-model="searchForm.order_num" 
                    placeholder="请输入赛事编号"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="主队名称">
                  <el-input 
                    v-model="searchForm.homesxname" 
                    placeholder="请输入主队名称"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="客队名称">
                  <el-input 
                    v-model="searchForm.awaysxname" 
                    placeholder="请输入客队名称"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 时间范围 -->
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="比赛时间范围">
                  <el-date-picker
                    v-model="matchTimeRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属日期范围">
                  <el-date-picker
                    v-model="ownerdateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 初始赔率范围 -->
            <el-divider content-position="left">初始赔率范围</el-divider>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="主队初始赔率">
                  <el-input-number 
                    v-model="searchForm.home_initial_min" 
                    placeholder="最小值"
                    :precision="3"
                    :step="0.01"
                    style="width: 45%"
                  />
                  <span style="margin: 0 10px">-</span>
                  <el-input-number 
                    v-model="searchForm.home_initial_max" 
                    placeholder="最大值"
                    :precision="3"
                    :step="0.01"
                    style="width: 45%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="平局初始赔率">
                  <el-input-number 
                    v-model="searchForm.draw_initial_min" 
                    placeholder="最小值"
                    :precision="3"
                    :step="0.01"
                    style="width: 45%"
                  />
                  <span style="margin: 0 10px">-</span>
                  <el-input-number 
                    v-model="searchForm.draw_initial_max" 
                    placeholder="最大值"
                    :precision="3"
                    :step="0.01"
                    style="width: 45%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客队初始赔率">
                  <el-input-number 
                    v-model="searchForm.away_initial_min" 
                    placeholder="最小值"
                    :precision="3"
                    :step="0.01"
                    style="width: 45%"
                  />
                  <span style="margin: 0 10px">-</span>
                  <el-input-number 
                    v-model="searchForm.away_initial_max" 
                    placeholder="最大值"
                    :precision="3"
                    :step="0.01"
                    style="width: 45%"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 最终赔率范围 -->
            <el-divider content-position="left">最终赔率范围</el-divider>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="主队最终赔率">
                  <el-input-number 
                    v-model="searchForm.home_final_min" 
                    placeholder="最小值"
                    :precision="3"
                    :step="0.01"
                    style="width: 45%"
                  />
                  <span style="margin: 0 10px">-</span>
                  <el-input-number 
                    v-model="searchForm.home_final_max" 
                    placeholder="最大值"
                    :precision="3"
                    :step="0.01"
                    style="width: 45%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="平局最终赔率">
                  <el-input-number 
                    v-model="searchForm.draw_final_min" 
                    placeholder="最小值"
                    :precision="3"
                    :step="0.01"
                    style="width: 45%"
                  />
                  <span style="margin: 0 10px">-</span>
                  <el-input-number 
                    v-model="searchForm.draw_final_max" 
                    placeholder="最大值"
                    :precision="3"
                    :step="0.01"
                    style="width: 45%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客队最终赔率">
                  <el-input-number 
                    v-model="searchForm.away_final_min" 
                    placeholder="最小值"
                    :precision="3"
                    :step="0.01"
                    style="width: 45%"
                  />
                  <span style="margin: 0 10px">-</span>
                  <el-input-number 
                    v-model="searchForm.away_final_max" 
                    placeholder="最大值"
                    :precision="3"
                    :step="0.01"
                    style="width: 45%"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 比分范围 -->
            <el-divider content-position="left">比分范围</el-divider>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="主队得分">
                  <el-input-number 
                    v-model="searchForm.homescore_min" 
                    placeholder="最小值"
                    :min="0"
                    style="width: 45%"
                  />
                  <span style="margin: 0 10px">-</span>
                  <el-input-number 
                    v-model="searchForm.homescore_max" 
                    placeholder="最大值"
                    :min="0"
                    style="width: 45%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客队得分">
                  <el-input-number 
                    v-model="searchForm.awayscore_min" 
                    placeholder="最小值"
                    :min="0"
                    style="width: 45%"
                  />
                  <span style="margin: 0 10px">-</span>
                  <el-input-number 
                    v-model="searchForm.awayscore_max" 
                    placeholder="最大值"
                    :min="0"
                    style="width: 45%"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 胜负概率范围 -->
            <el-divider content-position="left">胜负概率范围</el-divider>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="主胜概率">
                  <el-input-number 
                    v-model="searchForm.prob_home_win_min" 
                    placeholder="最小值"
                    :min="0"
                    :max="100"
                    :precision="2"
                    style="width: 45%"
                  />
                  <span style="margin: 0 10px">-</span>
                  <el-input-number 
                    v-model="searchForm.prob_home_win_max" 
                    placeholder="最大值"
                    :min="0"
                    :max="100"
                    :precision="2"
                    style="width: 45%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="平局概率">
                  <el-input-number 
                    v-model="searchForm.prob_draw_min" 
                    placeholder="最小值"
                    :min="0"
                    :max="100"
                    :precision="2"
                    style="width: 45%"
                  />
                  <span style="margin: 0 10px">-</span>
                  <el-input-number 
                    v-model="searchForm.prob_draw_max" 
                    placeholder="最大值"
                    :min="0"
                    :max="100"
                    :precision="2"
                    style="width: 45%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客胜概率">
                  <el-input-number 
                    v-model="searchForm.prob_away_win_min" 
                    placeholder="最小值"
                    :min="0"
                    :max="100"
                    :precision="2"
                    style="width: 45%"
                  />
                  <span style="margin: 0 10px">-</span>
                  <el-input-number 
                    v-model="searchForm.prob_away_win_max" 
                    placeholder="最大值"
                    :min="0"
                    :max="100"
                    :precision="2"
                    style="width: 45%"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 显示赔率开关 -->
            <el-row>
              <el-col :span="24" style="text-align: center">
                <el-checkbox v-model="showOdds" label="显示赔率" size="large" />
              </el-col>
            </el-row>
            
            <!-- 操作按钮 -->
            <el-row>
              <el-col :span="24" style="text-align: center">
                <el-button type="primary" @click="handleSearch" :loading="isLoading">
                  <el-icon><Search /></el-icon>
                  查询
                </el-button>
                <el-button @click="handleReset">
                  <el-icon><Refresh /></el-icon>
                  重置
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>查询结果</span>
          <span class="total-info" v-if="total > 0">
            共 {{ total }} 条记录
          </span>
        </div>
      </template>


      <el-table 
        :data="matchPredictData" 
        v-loading="isLoading"
        stripe
        style="width: 100%"
        height="600"
        :key="tableKey"
        :expand-row-keys="expandedRowKeys"
        row-key="fid"
      >
        <el-table-column type="expand">
          <template #default="{ row }">
            <!-- 风险分析内容 -->
            <div v-if="riskAnalysisExpandedStates[row.fid]" class="risk-analysis-detail">
              <el-card shadow="never" style="margin: 2px; border: none;">
                <div style="display: flex; gap: 10px;">
                  <!-- 风险分析 -->
                  <div style="flex: 1;">
                    <h4 style="margin: 2px 0; font-size: 13px;">风险分析</h4>
                    <el-table 
                      :data="[riskAnalysisDataMap[row.fid]]" 
                      size="small"
                      style="width: 100%; font-size: 12px;"
                      :show-header="false"
                      :cell-style="{ padding: '2px 0', 'text-align': 'center' }"
                      :row-style="{ height: '24px' }"
                    >
                      <el-table-column width="120" label="总比赛场次">
                        <template #default="{ row }">
                          <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
                            <span>总比赛场次</span>
                            <span>{{ row?.total_matches || 0 }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column width="120" label="主胜场次">
                        <template #default="{ row }">
                          <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
                            <span>主胜场次</span>
                            <span>{{ row?.home_wins || 0 }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column width="120" label="平局场次">
                        <template #default="{ row }">
                          <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
                            <span>平局场次</span>
                            <span>{{ row?.draws || 0 }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column width="120" label="客胜场次">
                        <template #default="{ row }">
                          <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
                            <span>客胜场次</span>
                            <span>{{ row?.away_wins || 0 }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column width="120" label="主胜率">
                        <template #default="{ row }">
                          <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
                            <span>主胜率</span>
                            <span>{{ row?.home_win_rate?.toFixed(2) || '0.00' }}%</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column width="120" label="平局率">
                        <template #default="{ row }">
                          <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
                            <span>平局率</span>
                            <span>{{ row?.draw_rate?.toFixed(2) || '0.00' }}%</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column width="120" label="客胜率">
                        <template #default="{ row }">
                          <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
                            <span>客胜率</span>
                            <span>{{ row?.away_win_rate?.toFixed(2) || '0.00' }}%</span>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  
                  <!-- 主队爆冷分析 -->
                  <div style="flex: 1;">
                    <h4 style="margin: 2px 0; font-size: 13px;">主队爆冷分析</h4>
                    <el-table 
                      :data="[coldPlayAnalysisDataMap[row.fid]?.home]" 
                      size="small"
                      style="width: 100%; font-size: 12px;"
                      :show-header="false"
                      :cell-style="{ padding: '2px 0', 'text-align': 'center' }"
                      :row-style="{ height: '24px' }"
                    >
                      <el-table-column width="120" label="总比赛场次">
                        <template #default="{ row }">
                          <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
                            <span>总比赛场次</span>
                            <span>{{ row?.total_matches || 0 }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column width="120" label="爆冷场次">
                        <template #default="{ row }">
                          <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
                            <span>爆冷场次</span>
                            <span>{{ row?.error_matches || 0 }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column width="120" label="爆冷率">
                        <template #default="{ row }">
                          <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
                            <span>爆冷率</span>
                            <span>{{ row?.error_matches_rate ? (row.error_matches_rate * 100).toFixed(2) : '0.00' }}%</span>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  
                  <!-- 客队爆冷分析 -->
                  <div style="flex: 1;">
                    <h4 style="margin: 2px 0; font-size: 13px;">客队爆冷分析</h4>
                    <el-table 
                      :data="[coldPlayAnalysisDataMap[row.fid]?.away]" 
                      size="small"
                      style="width: 100%; font-size: 12px;"
                      :show-header="false"
                      :cell-style="{ padding: '2px 0', 'text-align': 'center' }"
                      :row-style="{ height: '24px' }"
                    >
                      <el-table-column width="120" label="总比赛场次">
                        <template #default="{ row }">
                          <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
                            <span>总比赛场次</span>
                            <span>{{ row?.total_matches || 0 }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column width="120" label="爆冷场次">
                        <template #default="{ row }">
                          <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
                            <span>爆冷场次</span>
                            <span>{{ row?.error_matches || 0 }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column width="120" label="爆冷率">
                        <template #default="{ row }">
                          <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
                            <span>爆冷率</span>
                            <span>{{ row?.error_matches_rate ? (row.error_matches_rate * 100).toFixed(2) : '0.00' }}%</span>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-card>
            </div>
            <div v-else class="risk-analysis-loading" style="padding: 20px; text-align: center;">
              加载中...
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="fid" label="ID" min-width="60" width="80" />
        <el-table-column prop="season_id" label="赛季id" min-width="80" />
        <el-table-column prop="event_name" label="赛事名称" min-width="80" />
        <el-table-column prop="order_num" label="赛事编号" min-width="100" />
        <el-table-column prop="ownerdate" label="所属日期" min-width="90" />
        <el-table-column prop="matchtime" label="比赛时间" min-width="120" />
        <el-table-column prop="homesxname" label="主队" min-width="80" />
        <el-table-column prop="awaysxname" label="客队" min-width="80" />
        <el-table-column prop="homescore" label="主队得分" min-width="70" width="80" />
        <el-table-column prop="awayscore" label="客队得分" min-width="70" width="80" />
        
        <!-- 初始赔率 -->
        <el-table-column label="初始赔率" min-width="150" v-if="showOdds">
          <template #default="{ row }">
            <div class="odds-group">
              <span class="odds-item home">{{ row.home_initial || '-' }}</span>
              <span class="odds-item draw">{{ row.draw_initial || '-' }}</span>
              <span class="odds-item away">{{ row.away_initial || '-' }}</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 最终赔率 -->
        <el-table-column label="最终赔率" min-width="150" v-if="showOdds">
          <template #default="{ row }">
            <div class="odds-group">
              <span class="odds-item home">{{ row.home_final || '-' }}</span>
              <span class="odds-item draw">{{ row.draw_final || '-' }}</span>
              <span class="odds-item away">{{ row.away_final || '-' }}</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 胜负概率 -->
        <el-table-column label="胜平负概率(%)" min-width="160">
          <template #default="{ row }">
            <div class="prob-group">
              <span class="prob-item home">{{ row.prob_home_win ? (row.prob_home_win * 100).toFixed(2) : '-' }}%</span>
              <span class="prob-item draw">{{ row.prob_draw ? (row.prob_draw * 100).toFixed(2) : '-' }}%</span>
              <span class="prob-item away">{{ row.prob_away_win ? (row.prob_away_win * 100).toFixed(2) : '-' }}%</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 风险分析 -->
        <el-table-column label="分析" min-width="100" fixed="right">
          <template #default="{ row }">
            <el-button 
              type="primary" 
              size="small" 
              @click="toggleRiskAnalysis(row)"
              :loading="riskAnalysisLoadingStates[row.fid || -1]"
            >
              {{ riskAnalysisExpandedStates[row.fid || -1] ? '收起' : '展开' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper" v-if="total > 0">
        <el-pagination
          :current-page="currentPage"
          :page-size="searchCondition.page_size"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useMatchPredictStore } from '@/pinia/stores/matchPredictStore'
import type { MatchPredictEurope168Condition } from './apis/type'
import { Search, Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const matchPredictStore = useMatchPredictStore()

  // 使用 storeToRefs 保持响应式
  const { 
    isLoading, 
    matchPredictData, 
    pagination, 
    searchCondition, 
    total, 
    currentPage,
    // 爆冷分析状态
    coldPlayAnalysisLoadingStates,
    coldPlayAnalysisDataMap
  } = storeToRefs(matchPredictStore)

// 响应式数据
const isSearchCollapsed = ref(false)
const matchTimeRange = ref<[string, string] | null>(null)
const ownerdateRange = ref<[string, string] | null>(null)
const tableKey = ref(0) // 用于强制表格重新渲染
const showOdds = ref(true) // 是否显示赔率

// 风险分析状态管理
const riskAnalysisLoadingStates = ref<Record<number, boolean>>({})
const riskAnalysisExpandedStates = ref<Record<number, boolean>>({})
const riskAnalysisDataMap = ref<Record<number, any>>({})

// 展开行的key
const expandedRowKeys = computed(() => {
  return Object.keys(riskAnalysisExpandedStates.value)
    .filter(key => riskAnalysisExpandedStates.value[Number(key)])
    .map(key => key)
})

// 搜索表单
const searchForm = reactive<MatchPredictEurope168Condition>({
  current_page: 1,
  page_size: 20
})


// 方法
function toggleSearch() {
  isSearchCollapsed.value = !isSearchCollapsed.value
}

async function handleSearch() {
  // 处理时间范围
  if (matchTimeRange.value) {
    searchForm.s_time = matchTimeRange.value[0]
    searchForm.e_time = matchTimeRange.value[1]
  } else {
    searchForm.s_time = null
    searchForm.e_time = null
  }

  if (ownerdateRange.value) {
    searchForm.ownerdate_s = ownerdateRange.value[0]
    searchForm.ownerdate_e = ownerdateRange.value[1]
  } else {
    searchForm.ownerdate_s = null
    searchForm.ownerdate_e = null
  }

  // 更新搜索条件并查询
  matchPredictStore.updateSearchCondition(searchForm)
}

function handleReset() {
  // 重置表单
  const keys = Object.keys(searchForm) as Array<keyof MatchPredictEurope168Condition>
  keys.forEach(key => {
    if (key === 'current_page' || key === 'page_size') {
      searchForm[key] = key === 'current_page' ? 1 : 20
    } else {
      searchForm[key] = null
    }
  })
  
  matchTimeRange.value = null
  ownerdateRange.value = null
  
  // 重置store
  matchPredictStore.resetSearchCondition()
}

async function handleSizeChange(size: number) {
  matchPredictStore.updateSearchCondition({
    page_size: size,
    current_page: 1
  })
}

async function handleCurrentChange(page: number) {
  matchPredictStore.updateSearchCondition({
    current_page: page
  })
}

// 风险分析相关方法
async function toggleRiskAnalysis(row: any) {
  const fid = row.fid || -1;
  
  // 如果已经展开，则收起
  if (riskAnalysisExpandedStates.value[fid]) {
    riskAnalysisExpandedStates.value[fid] = false
    return
  }
  
  // 设置加载状态
  riskAnalysisLoadingStates.value[fid] = true
  
  try {
    // 并行调用API获取风险分析和爆冷分析数据
    const [riskData, coldPlayData] = await Promise.all([
      matchPredictStore.fetchHistoricalSimilarStats(row),
      matchPredictStore.fetchColdPlayAnalysisStats(row)
    ]);
    
    // 保存风险分析数据
    if (riskData) {
      riskAnalysisDataMap.value[fid] = riskData;
    }
    
    // 保存爆冷分析数据（已经在store中处理）
    
    // 设置展开状态
    if (riskData) {
      riskAnalysisExpandedStates.value[fid] = true;
    }
  } catch (error) {
    console.error('获取分析数据失败:', error);
    ElMessage.error('获取分析数据失败');
  } finally {
    riskAnalysisLoadingStates.value[fid] = false;
  }
}




// 生命周期
onMounted(() => {
  // 初始查询
  matchPredictStore.fetchMatchPredictEurope168()
})

</script>

<style scoped>
.match-predict-page {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-info {
  color: #909399;
  font-size: 14px;
}

.search-form {
  padding: 20px 0;
}

.odds-group, .prob-group {
  display: flex;
  gap: 8px;
}

.odds-item, .prob-item {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.odds-item.home, .prob-item.home {
  background-color: #f0f9ff;
  color: #1e40af;
}

.odds-item.draw, .prob-item.draw {
  background-color: #fef3c7;
  color: #92400e;
}

.odds-item.away, .prob-item.away {
  background-color: #f0fdf4;
  color: #166534;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.el-divider {
  margin: 20px 0;
}

/* 优化展开内容的样式 */
.el-card {
  margin: 2px !important;
}

.el-card__body {
  padding: 5px !important;
}

.el-statistic {
  margin: 0 2px;
}

.el-statistic__title {
  font-size: 12px;
}

.el-statistic__content {
  font-size: 12px;
}

.el-statistic__suffix {
  font-size: 12px;
}

h4 {
  margin: 3px 0 !important;
  font-size: 14px;
}
</style>
